<template>
  <u-popup :show="show" @close="show = false">
    <view class="car-form">
      <view class="title">车辆信息</view>
      <u--form
        labelPosition="left"
        :model="form"
        :rules="rules"
        labelWidth="100"
        ref="uForm"
      >
        <u-form-item required label="车辆类型" prop="vehicleType" borderBottom>
          <view class="radio">
            <view
              class="radio-item flex-c"
              v-for="(item, index) of vehicleTypeList"
              :key="item.dictValue"
              :class="{ active: active === index }"
              @click="
                () => {
                  active = index;
                  form.vehicleType = item.dictValue;
                  form.vehicleName = item.dictLabel;
                }
              "
            >
              {{ item.dictLabel }}
            </view>
          </view>
        </u-form-item>
        <u-form-item
          required
          label="车辆使用年限"
          prop="vehicleServiceLife"
          borderBottom
        >
          <LSelect
            v-model="form.vehicleServiceLife"
            border="none"
            :localdata="serviceLifeList"
          ></LSelect>
        </u-form-item>
        <u-form-item label="电池数量" prop="batteriesNum" borderBottom>
          <u--input
            v-model="form.batteriesNum"
            placeholder="请输入"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item required label="电池型号" prop="batteryModel" borderBottom>
          <LSelect
            v-model="form.batteryModel"
            border="none"
            :localdata="batteryModelList"
          ></LSelect>
        </u-form-item>
        <u-form-item required label="车辆照片" prop="frontPhoto" borderBottom>
          <view class="flex-ja">
            <Upload
              @input="(val) => (form.frontPhoto = val)"
              tip="正面照"
            ></Upload>
            <Upload
              @input="(val) => (form.sidePhoto1 = val)"
              tip="侧面照1"
            ></Upload>
            <Upload
              @input="(val) => (form.sidePhoto2 = val)"
              tip="侧面照2"
            ></Upload>
          </view>
        </u-form-item>
        <u-form-item label="预期价格" prop="expectedPrice" borderBottom>
          <u--input
            v-model="form.expectedPrice"
            placeholder="请输入"
            border="none"
          ></u--input>
        </u-form-item>
        <u-form-item label="留言备注" prop="remark" borderBottom>
          <u--textarea
            v-model="form.remark"
            placeholder="请输入"
            border="none"
          ></u--textarea>
        </u-form-item>
      </u--form>
      <view class="submit flex-jb flex-ac">
        <view class="price">
          {{ `预估总价 ￥${price}` }}
        </view>
        <view class="button-small" @click="submit"> 确认 </view>
      </view>
    </view>
  </u-popup>
</template>
<script>
import LSelect from "@/components/LSelect";
import Upload from "@/components/Upload";
import { getDict, getEstimatedPrice } from "@/api";
export default {
  components: {
    LSelect,
    Upload,
  },
  data() {
    return {
      price: 200,
      show: false,
      index: null,
      form: {
        vehicleServiceLife: null,
        batteriesNum: null,
        vehicleType: null,
        batteryModel: null,
        frontPhoto: null,
      },
      vehicleTypeList: [],
      serviceLifeList: [],
      batteryModelList: [],
      active: null,
      rules: {
        vehicleServiceLife: {
          type: "string",
          required: true,
          message: "请选择使用年限",
          trigger: ["blur"],
        },
        vehicleType: {
          type: "string",
          required: true,
          message: "请选择车辆类型",
          trigger: ["blur"],
        },
        batteryModel: {
          type: "string",
          required: true,
          message: "请选择电池型号",
          trigger: ["blur"],
        },
        frontPhoto: {
          type: "string",
          required: true,
          message: "请上传车辆照片",
          trigger: ["blur"],
        },
      },
    };
  },
  watch: {
    form: {
      deep: true,
      handler(val) {
        getEstimatedPrice([val]).then((res) => {
          this.price = res.data || 0;
        });
      },
    },
  },
  created() {
    getDict("vehicle_type").then((res) => {
      this.vehicleTypeList = res.data;
    });
    getDict("service_life").then((res) => {
      this.serviceLifeList = res.data.map((item) => {
        return {
          value: item.dictValue,
          text: item.dictLabel,
        };
      });
    });
    getDict("battery_model").then((res) => {
      this.batteryModelList = res.data.map((item) => {
        return {
          value: item.dictValue,
          text: item.dictLabel,
        };
      });
    });
  },
  methods: {
    open(data, index) {
      if (data) {
        this.form = data;
        this.index = index;
      } else {
        this.index = null;
      }
      this.show = true;
    },
    close() {
      this.form = {};
      this.show = false;
    },
    submit() {
      this.$refs.uForm.validate().then((res) => {
        if (!this.form.id) {
          this.form.id = new Date().getTime();
        }
        this.$emit("submit", this.form, this.index);
      });
    },
  },
};
</script>
<style lang="less" scoped>
.car-form {
  padding: 30rpx;
  height: 80vh;
  overflow: auto;
  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
    margin-bottom: 30rpx;
  }

  .radio {
    display: grid;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 146rpx);
    grid-row-gap: 10rpx;
    .active {
      border: 2rpx solid #138e57;
      box-sizing: border-box;
      color: #138e57;
    }
    .radio-item {
      width: 146rpx;
      height: 60rpx;
      background: #f7f7f7;
      border-radius: 200rpx;
      text-align: center;
    }
  }
  .submit {
    margin-top: 18rpx;
  }
}
</style>
